<template>
	<div class="info">
		<div class="selfInfo">
			<div class="touxiang">
				<img :src = "imgg"  />
			</div>
			<div class="haoma">
				<p class="selfPhone">{{phone | changePhone}}</p>
				<p class="selfscore">积分总额：<em>{{scores}}</em></p>
			</div>
			<div class="chongz">充值</div>
		</div>

		<div class="selfQianb">
			<div class="title">我的钱包</div>
			<ul class="selfUl-list">
				<li>
					<router-link to="">
						<img src="../../assets/images/jymm.png" />
						<p>交易明细</p>
					</router-link>
				</li>
				<li>
					<router-link to="">
						<img src="../../assets/images/qianbao.png" style="width:.7rem;height:.7rem;padding:.15rem"/>
						<p>好友红包</p>
					</router-link>
				</li>
			</ul>
		</div>

		<div class="selfDingd">
			<div class="title wddd">我的订单</div>
			<ul class="selfUl-list">
				<li>
					<router-link to="">
						<img src="../../assets/images/sh.png" />
						<p>退款/售后</p>
					</router-link>
				</li>
				<li>
					<router-link to="">
						<img src="../../assets/images/dsh.png" />
						<p>待收货</p>
					</router-link>
				</li>
				<li>
					<router-link to="">
						<img src="../../assets/images/dfh.png" />
						<p>待发货</p>
					</router-link>
				</li>
				<li>
					<router-link to="">
						<img src="../../assets/images/dfk.png" />
						<p>待付款</p>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>

	import userinfo from "../../service/UserInfo";
	import {Mint} from "mint-ui";
	export default {
		data(){
			return {
				imgg:"",
				scores:"",
				phone:"",
				openid:window.sessionStorage.getItem("beansOpenid")
			}
		},
		mounted(){
			userinfo.get({openid:this.openid})
			.then(data => {
				if(data.code == "201") {
					this.phone = data.info.phone || "";
				}
			})
			userinfo.getBase({openid:this.openid})
			.then (data => {
				this.imgg = data.info.headPic;
				this.scores = data.info.score;
			})
		},
		create(){

		},
		filters:{
			changePhone(value) {
				if(!value) {
					return;
				}
				var a = value.substr(0,3),
					b = value.substr(7,4);
				return a+"xxxx"+b;
			}
		}
	}
</script>
<style lang="scss">
	.info {
		font-size: .4rem;
		.selfInfo {
			position: relative;
		    background: #fff;
		    padding: .3rem .2rem;
		    width: 100%;
		    overflow: hidden;
			& > div {
				float: left;
			}
			.touxiang {
				width: 1.5rem;
			    height: 1.5rem;
			    border-radius: 1rem;
			    border: 1px solid #f3f3f3;
				img {
					width: 100%;
					height: 100%;
					border-radius: 1rem;
				}
			}
			.haoma {
				margin-left: .25rem;
    			margin-top: .25rem;
				.selfPhone {
					font-size: .35rem;
					color: #777;
				}
				.selfscore {
					color: #999;
					font-size: .3rem;
					em {
						font-style: inherit;
						color: #e6860b;
						font-size: .4rem;
					}
				}
			}
			.chongz {
				position: absolute;
			    width: 1.5rem;
			    line-height: .8rem;
			    text-align: center;
			    background: #ead049;
			    color: #fff;
			    border-radius: .2rem;
			    right: 0.4rem;
			    top: .6rem;
			}
		}
		.title {
			position: relative;
			padding-left: .15rem;
			&::before {
				content: "";
				position:absolute;
				width:1px;
				height:.4rem;
				top: 0.1rem;
				left:0;
				background: #c7ac80;
			}
		}
		.wddd:before {
			background:#e8355d;
		}
		.selfQianb,.selfDingd {
			background: #fff;
			margin-top: .2rem;
			padding: .2rem;
			overflow: hidden;
			li {
				float: left;
				font-size:.2rem;
				margin-right:.95rem;
				&:last-child {
					margin-right: 0 !important;
				}
				img {
					width:1rem;
					height: 1rem;
				}
			}
		}

	}
</style>
